<template>
    <h2>录入门店信息</h2>>
    <table class="table table-bordered">
        <tr>
            <td>门店名称</td>
            <td>
                <input type="text" placeholder="请输入门店名称" v-model="info.mName">
            </td>
        </tr>
        <tr>
            <td>分店名称</td>
            <td>
                <input type="text" placeholder="请输入门店名称" v-model="info.fName">
            </td>
        </tr>
        <tr>
            <td>商户地址</td>
            <td>
                <input type="text" placeholder="请输入门店名称" v-model="info.sAddr">
            </td>
        </tr>
        <tr>
            <td>门店图片</td>
            <td>
               <img :src="info.pic" style="width: 100px; height: 100px;">
               <input type="file" @change="upLoad">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="提交" @click="add">
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router';

let router=useRouter()

const info=ref({
    mName:'',
    fName:'',
    sAddr:'',
    pic:'',
})

const file=ref(null)
const upLoad=(e:any)=>{
    file.value=e.target.files[0];
    if(!file.value){
        alert("请选择文件")
        return;
    }
    const fromdata=new FormData();
    fromdata.append("file",file.value);
    axios.post('https://localhost:7231/api/Files/FileLoads',fromdata)
    .then(res=>{
        info.value.pic=res.data[0];
    })
    .catch(err=>{
        console.log(err);
    })
}

const add=()=>{
    axios.post('https://localhost:7231/api/MenDian/AddMenDian',{
        mName:info.value.mName,
        fName:info.value.fName,
        sAddr:info.value.sAddr,
        pic:info.value.pic,
    })
    .then(res=>{
        if(res.data>0){
            alert("添加成功")
        }
        else if(res.data==-1)
        {
            alert("已存在")
            return;
            
        }
        else{
            alert("添加失败")
            return;
        }
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>